<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./OL_SDK/include-openlayers-local.js"></script>
    <script src="./libs/gaode.js"></script>
</head>

<body>
    <div id="map">
    </div>
    <script>
        var map = new ol.Map({
            target: "map",
            layers: [gaode],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [114.30, 30.50],
                zoom: 4
            })
        })
        /* 设置动画图层 */
        var source = new ol.source.Vector({});
        var layer = new ol.layer.Vector({
            source
        })
        map.addLayer(layer);
        /* 初始化canvas */
        const canvas = document.createElement("canvas");
        let size = 40;
        canvas.width = size;
        canvas.height = size;
        let radius = size / 4;  //10;
        let increase = true;
        let ctx = canvas.getContext("2d");
        /*
        大于  14  false
        小于  10  true
         */
        function draw() {
            ctx.clearRect(0, 0, size, size);
            /* 第一个圆 */
            ctx.beginPath();
            ctx.arc(size / 2, size / 2, radius, 0, Math.PI * 2);
            ctx.closePath();
            ctx.fillStyle = "#ff2d51";
            ctx.fill();
            /* 设置第二个圆 */
            ctx.beginPath();
            ctx.arc(size / 2, size / 2, 8, 0, Math.PI * 2);
            ctx.closePath();
            ctx.fillStyle = "#0D5EFF";
            ctx.fill();
            if (radius > 14) {
                increase = false;
            }
            if (radius < 10) {
                increase = true;
            }
            if (increase) {
                radius++;
            } else {
                radius--;
            }
            setTimeout(draw, 100);
            map.render(); //让地图重新渲染一下
        }
        draw();
        /* canvas设置为style */
        let style = new ol.style.Style({
            image: new ol.style.Icon({
                img: canvas,
                imgSize: [canvas.width, canvas.height]
            })
        })
        var point = new ol.Feature({
            geometry: new ol.geom.Point([114.30, 30.50])
        })
        source.addFeature(point);
        layer.setStyle(style);
    </script>
</body>

</html>